<template>
  <div class="serviceManagement_index">
    <c-title :hide="false" :text="'服务管理'"></c-title>
    <div class="topBox">
      <div class="topBoxTxt">商品估值</div>
      <div class="price">
        <div class="price_l">￥</div>
        <div class="priceTxt">{{ infoData.goods_amount }}</div>
      </div>
    </div>
    <div class="bottomBox">
      <div class="wallet bottomBox_lis" @click="to_wallet">
        <div class="top_icon">
          <img :src="diyUrl('icon_wallet@2x.png')" alt="" />
        </div>
        <div class="txt" style="margin-bottom:0.37rem;">钱包</div>
        <div class="txt">
          <div class="smtxt">￥</div>
          {{ infoData.money }}
        </div>
      </div>
      <div class="good bottomBox_lis" @click="to_Pending_goods">
        <div class="top_icon">
          <img :src="diyUrl('icon_commodity@2x.png')" alt="" />
        </div>
        <div class="txt" style="margin-bottom:0.37rem;">待提商品</div>
        <div class="txt">
          <div class="smtxt">剩余</div>
          {{ infoData.point }}
        </div>
      </div>
      <div class="profit bottomBox_lis" @click="to_profit_detail">
        <div class="top_icon">
          <img :src="diyUrl('icon_profit@2x.png')" alt="" />
        </div>
        <div class="txt" style="margin-bottom:0.37rem;">盈利/收益</div>
        <div class="txt" v-if="infoData">
          <div class="smtxt">￥</div>
          {{ addNum() }}
        </div>
      </div>
      <div class="auction bottomBox_lis" @click="to_auction_bidding_details">
        <div class="top_icon">
          <img :src="diyUrl('icon_participate in auctions@2x.png')" alt="" />
        </div>
        <div class="txt" style="margin-bottom:0.37rem;">参拍/委拍</div>
        <div class="txt" style="opacity: 0;">
          <div class="smtxt">￥</div>
          1,999.00
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      infoData: [],
      hostUrl: ""
    };
  },
  activated() {
    this.getData();
    this.hostUrl = process.env.NODE_ENV == "development" ? "dev4.yunzmall.com" : window.location.host;
  },
  computed: {
    diyUrl(url, key = true) {
      return function(url, key = true) {
        if (key) {
          return `https://${this.hostUrl}/plugins/new-auction/assets/image/${url}`;
        } else {
          return `url(https://${this.hostUrl}/plugins/new-auction/assets/image/${url})`;
        }
      };
    }
  },
  methods: {
    to_wallet() {
      this.$router.push(this.fun.getUrl("new_auction_wallet", {}));
    },
    to_Pending_goods() {
      this.$router.push(this.fun.getUrl("new_auction_Pending_goods", {}));
    },
    addNum() {
      let num = Number(this.infoData.self_income) + Number(this.infoData.parent_income);
      console.log(num);
      return num.toFixed(2);
    },
    to_auction_bidding_details() {
      this.$router.push(this.fun.getUrl("auction_bidding_details", {}));
    },
    to_profit_detail() {
      this.$router.push(this.fun.getUrl("new_auction_profit_detail", {}));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.index", {}, "");
      if (result) {
        this.infoData = data;
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.serviceManagement_index {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #ffffff;
}
.bottomBox {
  margin-top: -1rem;
  background: #ffffff;
  border-radius: 1.56rem 1.56rem 0 0;
  padding: 1.25rem 0.94rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .wallet {
    background: #d2f9d8;
  }
  .good {
    background: #dff3ff;
  }
  .profit {
    background: #ffecd1;
  }
  .auction {
    background: #ffe6e1;
  }
  .bottomBox_lis {
    flex-shrink: 0;
    width: 10.31rem;
    height: 11.88rem;
    border-radius: 0.94rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.94rem;
    .top_icon {
      width: 2.5rem;
      height: 2.5rem;
      margin-bottom: 0.75rem;
      img {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    }
    .txt {
      display: flex;
      align-items: flex-end;
      font-weight: bold;
      font-size: 1.25rem;
      line-height: 1.25rem;
      color: #000000;
      .smtxt {
        font-weight: 400;
        font-size: 0.88rem;
        line-height: 1rem;
      }
    }
  }
}
.topBox {
  width: 100%;
  height: 10.47rem;
  background: linear-gradient(132deg, #399271 0%, #389170 0%, #136345 100%, #136345 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .topBoxTxt {
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
  }
  .price {
    display: flex;
    align-items: flex-end;
    .price_l {
      font-size: 1rem;
      color: #ffffff;
    }
    .priceTxt {
      font-weight: bold;
      font-size: 2rem;
      color: #ffffff;
      line-height: 2.1rem;
    }
  }
}
</style>
